<template>
  <div class="search">
    <div class="search-head">
          <div class="back_img" @click="back"><img src="../../assets/images/icon-back.png" alt=""></div>
          <div class="search_cen">
              <input type="text" name="search" placeholder="搜索商品名称" ref="inputTitle" v-model.trim="total" @keyup.enter="enters">
          </div>
          <div class="search_rig" @click="go">
              <img src="../../assets/images/zoom.png" alt="">
          </div>
    </div>
    <div class="total" v-show="total">
      <ul>
        <li v-for="(item, index) in search" :key="index" @click="clicks(index,item.title)">{{item.title}}</li>
      </ul>
    </div>
    <div class="content">
      <div class="title">
        <div class="text">搜索历史</div>
        <div class="img"><img src="../../assets/images/del.png" alt=""></div>
    </div>
    <div class="buttons_in">
      <a href="javascript:;" v-for="(item, index) in searchlist" :key="index" @click="local(item)">{{item}}</a>
    </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'search',
    data() {
        return {
          total:'',//value
          searchlist:[],//存于localhos数组
          search:[],//搜索弹框数据
          timer:null,
          id:0//表示点击了的搜索数据索引值
        }
    },
    methods: {
      back(){
        this.$router.go(-1)
      },
      go(){
        if(!localStorage.getItem('searchlist')){
          localStorage.setItem('searchlist','[]')
        }
        localStorage.setItem('total',this.total)
        this.searchlist.unshift(this.total)
        let newArr = new Set(this.searchlist)//去重，之后为对象类型
        localStorage.setItem('searchlist',JSON.stringify(Array.from(newArr)))//对象转数组
          this.$router.push({
            path:'/searchview',
            query:{
              total:this.total,
              search:this.search,
              id:this.id
            }
          })
      },
      clicks(i,e){//弹窗点击事件
        let total = this.total
        this.id = i
        axios.get(`http://localhost:3000/search?title=${total}`).then(
            response => {
                this.search = response.data.list
                this.go()
            },
            error =>{
                console.log('error');
            }
          )
      },
      enters(){//回车事件
        this.go()
      },
      local(e){//搜索历史点击事件
      this.total = e
        axios.get(`http://localhost:3000/search?title=${e}`).then(
            response => {
                this.search = response.data.list
                this.go()
            },
            error =>{
                console.log('error');
            }
          )
      },
      getlist(){
        let total = this.total
        if(total){
          axios.get(`http://localhost:3000/search?title=${total}`).then(
            response => {
                this.search = response.data.list
            },
            error =>{
                console.log('error');
            }
          )
        }
      }
    },
    watch:{
      'total':{
        handler (value) {
          if(this.timer) {
            clearTimeout(this.timer)
          }
          this.timer = setTimeout(()=>{
            this.getlist();
          },500)
        }
      }
    },
    mounted() {
      this.$refs.inputTitle.focus()
      this.searchlist = JSON.parse(localStorage.getItem('searchlist'))
    },
}
</script>

<style scoped>
.search{
  position: relative;
  background-color: #fff;
}
.search-head {
  display: flex;
  height: 1.8rem;
  justify-content: space-around;
  align-items: center;
  background-color: #fafafa;
}

.back_img {
    width: 2rem;
    text-align: center;
    padding: .12rem;
}

.back_img img {
    width: 1.5rem;
}

.search_cen {
    flex-grow: 1;
    color: #111;
}
.search input {
    width: 98%;
    height: 1.08rem;
    padding: 0.3rem ;
    border: 0.04rem solid #e1e1e1;
    border-radius: 0.08rem;
    font-size: 0.6rem;
}
.search_rig{
  padding: .32rem .4rem .2rem .1rem;
}
.search_rig img{
  width: 1.2504rem;
  height: 1.2504rem;
}
.content {
  padding: .832rem .664rem;
}
.title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.title .text {
  font-size: .584rem;
  font-weight: 700;
  color: #3c3c3c;
}
.title .img img{
  width: 1rem;
  height: 1rem;
}
.buttons_in {
  width: 14rem;
  height: 5.7rem;
  overflow: hidden;
}
.buttons_in a {
  display: inline-block;
  padding: 0.3rem 0.5rem;
  background: rgba(0,0,0,.04);
  font-size: .5rem;
  border-radius: 1rem;
  color: #3c3c3c;
  margin-top: .5rem;
  margin-right: .5rem;
}
.total{
  position: absolute;
  top: 1.9rem;
  left: 0;
  width: 100%;
  height: 23.8rem;
  overflow: hidden;
  background-color: #fff;
}
.total ul li {
  color: #333;
  height: 1.98rem;
  line-height: 1.98rem;
  padding: 0 .72rem;
  border-bottom: .04rem solid #ccc;
}
</style>